<template>
  <view class="d-flex">
    <view class="ml-2" style="width:70%">
      <nut-cell
        :showIcon="true"
        title="选择日期"
        :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
        @click="openSwitch"
      >
      </nut-cell>
      <nut-calendar
        v-model:visible="isVisible"
        :default-value="date"
        type="range"
        :start-date="START_DATA"
        :end-date="null"
        @close="closeSwitch"
        @choose="setChooseValue"
      >
      </nut-calendar>
    </view>

    <view class="pl-2" style="overflow: hidden;">
      <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet">
        <div v-html="shopStore"></div>
      </nut-cell>
      <nut-actionsheet
        style="padding-bottom:100px"
        v-model:visible="isVisibleStore"
        :menu-items="menuItems"
        @choose="chooseItem"
      >
      </nut-actionsheet>
    </view>
  </view>
  <view class="d-flex">
    <view class="pl-2" style="overflow: hidden; width:45%">
      <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheetOrderType">
        <span v-if="!orderType" class="fs-sm"><label>选择订单类型</label></span>
        <div v-html="orderType"></div>
      </nut-cell>
      <nut-actionsheet
        style="padding-bottom:100px"
        v-model:visible="isVisibleOrderType"
        :menu-items="orderTypeList"
        cancel-txt="取消"
        @choose="chooseOrderType"
        @cancel="cancelOrderType"
      >
      </nut-actionsheet>
    </view>
    <view class="pl-2" style="overflow: hidden;width:45%">
      <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheetOrderStatus">
        <span v-if="!orderStatus" class="fs-sm"><label>选择订单状态</label></span>
        <div v-html="orderStatus"></div>
      </nut-cell>
      <nut-actionsheet
        style="padding-bottom:100px"
        v-model:visible="isVisibleOrderStatus"
        :menu-items="orderStatusList"
        cancel-txt="取消"
        @choose="chooseOrderStatus"
        @cancel="cancelOrderStatus"
      >
      </nut-actionsheet>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, toRaw } from 'vue'
// import Taro from '@tarojs/taro'
import dayjs from 'dayjs'
import { useStore } from '@/stores'
import { getMonthStartDate } from '@/utils/dataUtil.js'
import constData from '@/config/const'
import type { Istore } from '@/common/interface'
import { orderTypeList,orderStatusList } from '@/common/data'
import { getOrderList } from '@/services/apis/order'

const auth = useStore('auth')
onMounted(() => {
  //入口写了守卫这里可以不写
  // const token = Taro.getStorageSync('token')
  // console.log(token, 'token')
  // if (!token) {
  //   Taro.navigateTo({ url: '/pages/login/index' })
  // }
  fetchOrderList()
})

const { START_DATA } = constData
console.log(START_DATA, 'setData')

const data = computed(() => toRaw(auth.store)).value
const menuItems: [Istore] = data.map(ele => {
  return { name: ele.storeName, id: ele.id }
})
// console.log(menuItems, 'store')
const shopStore = ref(menuItems[0].name)
const initStoreId =  toRaw(ref(menuItems[0].id)).value
console.log(initStoreId,'initStoreId')
const isVisibleStore = ref(false)

const endDay = dayjs(Date.now() - 8.64e6).format('YYYY-MM-DD')
const startDay = getMonthStartDate()
console.log(startDay, 'startDay')

const date = ref([startDay, endDay])

let isVisible = ref(false)

const isVisibleOrderType = ref(false)
const isVisibleOrderStatus = ref(false)

const orderType = ref('')
const orderStatus = ref('')


let orderListParams = {
  storeID:initStoreId,
  beginDate:dayjs(startDay).unix(),
  endDate: dayjs(endDay).unix(),
  dateOptions:1,
  sortOptions:1,
  finishStatus:'',
  pageNo:1,
  pageSize:10,
  direction:1,
  orderType:''
}

const openSwitch = () => {
  isVisible.value = true
}
const closeSwitch = () => {
  isVisible.value = true
}
const setChooseValue = param => {
  date.value = [...[param[0][3], param[1][3]]]
  // console.log(dayjs(toRaw(param[0][3])).unix())
  // console.log(dayjs(toRaw(param[1][3])).unix())
  orderListParams.beginDate = dayjs(toRaw(param[0][3])).unix()
  orderListParams.endDate = dayjs(toRaw(param[1][3])).unix()
  fetchOrderList()
}

//门店
const switchActionSheet = () => {
  isVisibleStore.value = !isVisibleStore.value
}

const chooseItem = itemParams => {
  console.log(itemParams)
  shopStore.value = itemParams.name
  orderListParams.storeID = itemParams.id
  fetchOrderList()
}

//订单类型
const switchActionSheetOrderType = () => {
  isVisibleOrderType.value = !isVisibleOrderType.value
}

const chooseOrderType = itemParams => {
  console.log(itemParams)
  orderType.value = itemParams.name
  orderListParams.orderType = itemParams.id
  fetchOrderList()
}
const cancelOrderType = ()=>{
  orderType.value =''
  orderListParams.orderType = ''
  fetchOrderList()
}

//订单状态
const switchActionSheetOrderStatus = () => {
  isVisibleOrderStatus.value = !isVisibleOrderStatus.value
}


const chooseOrderStatus = itemParams => {
  console.log(itemParams)
  orderStatus.value = itemParams.name
  orderListParams.finishStatus = itemParams.id
  fetchOrderList()

}

const cancelOrderStatus = ()=>{
  orderStatus.value =''
  orderListParams.finishStatus = ''
  fetchOrderList()
}

//请求订单列表
const fetchOrderList  = async()=>{
  const res = await getOrderList(orderListParams)
  console.log(res)
}
</script>

<style lang="scss"></style>
